import { FC,useRef, useEffect, useState } from "react"
import { connect } from "react-redux"
import JoLPlayer, { JoLPlayerRef } from "jol-player"
import { useTranslation } from 'react-i18next'
import arrow from '@/assets/images/index/banner-arrow.png'
import bannerVideo from '@/assets/video/banner.mp4'
import game from '@/assets/video/banner.jpg'
import './index.scss'


interface ISwiperVideo {}

const SwiperVideo: FC<ISwiperVideo> = () => {

	const { t, i18n } = useTranslation()
	const videoRef = useRef<JoLPlayerRef>(null!)
 	const [ theme ] = useState<string>("#ffb821")

	 useEffect(() => {
	   console.log(`videoRef.current`, videoRef.current)
	 }, [videoRef.current])

	return (
		<div id="swiper-video">
            <div className="swiper-top-box flex-between">
                <div className="swiper-item-title">
                    <div>{t('indexBanner.game')}</div>
                    <div>{t('indexBanner.promotion')}</div>
                    <div>{t('indexBanner.video')}</div>
                </div>
                <img className="swiper-title-arrow" src={arrow} alt="" />
            </div>
            <div className="swiper-item-video">
                <JoLPlayer
                    className="jol-player-video"
                    ref={videoRef}
                    option={{
                        videoSrc: bannerVideo,
                        theme,
                        poster: game,
                        language: i18n.language === "zh" ? "zh" : "en",
                        pausePlacement: "center",
                        isToast: true,
                        isShowMultiple: false,
                        isShowScreenshot: false,
                        isShowWebFullScreen: false,
                        isShowSet: false,
                        isProgressFloat: true
                    }}
                />
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(SwiperVideo)